{%extends 'base.html'%}
{%block head%}
<script>

    //函数写在function外面
    //表示的是windows下的
    //this
    //这里只能写函数!!

    // 删除
      function del(cart_id) {
         if (confirm('确定要删除吗?')){
            $.get('/cart/delete/?cart_id='+cart_id,function (data) {
            if(data.delete == "ok"){
                $('#'+cart_id).remove();//删除ul
                calculate()
                }
            });
        }
      }

        // 计算函数
     function calculate() {
         //统计个数
        count=$('.cart_list_td').length;
        $('.total_count em').text(count);//上部分:全部商品
        count2 = 0;
        //小计和总计
         t = 0;
         $('.cart_list_td .col06').each(function () {
             price = parseFloat($(this).siblings('.col05').text());
             //alert(price)
             num = $(this).find('.num_show').val();
             //alert(num)
             kucun = $(this).siblings('.col03').find('em').text();
             //alert(kucun);
{#            $(this).find('.num_gt').hidden();;#}
             if (num > kucun){
               $(this).find('.num_gt').html('大于库存').show();
             }else {
                 $(this).find('.num_gt').hide()
             }

             prices = num * price;
             $(this).siblings('.col07').text(prices.toFixed(2) + '元');
             if ($(this).siblings('.col01').children('input').prop('checked')){
                 t += prices;
                 count2 +=1;
             }
         });
         $('.settlements .col03 em').text(t.toFixed(2));
         $('.settlements .col03 b').text(count2);//下部分:共计商品
     }


  $(function () {
      calculate();
 {#----------------------------勾选:全选,全消---------------------------------#}

      //勾选:全选,全消
      $('#check_all').change(function () {
          //if($(this).prop('checked')){
        //    $(':checkbox').prop('checked',true);
        //}else{
        //    $(':checkbox').prop('checked',false);
        //}
          $(':checkbox:not(#check_all)').prop('checked',$(this).prop('checked'))
            calculate();
      });

        //选择
      $(':checkbox:not(#check_all)').change(function () {
          if($(':checkbox:not(#check_all)').length == $(':checked:not(#check_all)').length){
              $('#check_all').prop('checked',true);
          }
          else{
              $('#check_all').prop('checked',false);
          }
          calculate();
      });
{#----------------------------加减和手动改数量||第一种---------------------------------#}

{#    // 加#}
{#    $('.add').click(function () {#}
{#       var kucun = $(this).parents('.col06').siblings('.col03').find('em').text();#}
{#        var num_show = $(this).prev();#}
{#        var num = parseInt(num_show.val());#}
{#        num_show.val(num+1);#}
{#        if (num >= kucun){#}
{#            num_show.val(kucun);#}
{#        }#}
{#        calculate();#}
{##}
{#        cart_id = $(this).parents('.col06').find('#cart_id').text();#}
{#        count = $(this).parents('.col06').find('.num_show').val();#}
{#        $.get('/cart/get/?cart_id='+cart_id+'&count='+count);#}
{#    });#}
{#    // 减#}
{#     $('.minus').click(function () {#}
{#         var num_show = $(this).next();#}
{#        var num = parseInt(num_show.val());#}
{#        if (num > 1){#}
{#            num_show.val(num-1);#}
{#        }#}
{#        calculate();#}
{##}
{#        cart_id = $(this).parents('.col06').find('#cart_id').text();#}
{#        count = $(this).parents('.col06').find('.num_show').val();#}
{#        $.get('/cart/get/?cart_id='+cart_id+'&count='+count);#}
{#    });#}
{#    // 手动改数量#}
{#     $('.num_show').blur(function () {#}
{#         var kucun = $(this).parents('.col06').siblings('.col03').find('em').text();#}
{#         var num_show = $(this);#}
{#         var num = parseInt($(this).val());#}
{#         //去除小数点 或 数字+字母#}
{#         num_show.val(num);#}
{#        if (num <= 1 || isNaN(num)){#}
{#            num_show.val(1);#}
{#        }#}
{#        else  if (num >= kucun){#}
{#            num_show.val(kucun);#}
{#        }#}
{#       calculate();#}
{#         //直接获取input里面id={{ cart_id }}的值#}
{#         //cart_id=$(this).parents('.col06').prevAll('input').val();#}
{#     // prevAll  可以用表达式过滤====查找当前元素之前所有的同辈元素#}
{##}
{#        cart_id = $(this).parents('.col06').find('#cart_id').text();#}
{#        count = $(this).parents('.col06').find('.num_show').val();#}
{#        $.get('/cart/get/?cart_id='+cart_id+'&count='+count);#}
{#     });#}


{#----------------------------加减和手动改数量||第二种---------------------------------#}

      // 加
    $('.add').click(function () {
        var num = parseInt($(this).prev().val());
        num +=1;
        $(this).prev().val(num).blur();//!!!
    });
        // 减
     $('.minus').click(function () {
        var num = parseInt($(this).next().val());
        num -=1;
       $(this).next().val(num).blur()
    });

      // 手动改数量
     $('.num_show').blur(function () {
         var kucun = $(this).parents('.col06').siblings('.col03').find('em').text();
         var num = parseInt($(this).val());
         //去除小数点
         if (num <= 1 || isNaN(num)){
            num = 1;
        }
        if (num >= kucun){
            num = kucun;
        }

{#         //直接获取input里面id={{ cart_id }}的值#}
{#        // cart_id=$(this).parents('.col06').prevAll('input').val();#}
{#            //   prevAll  可以用表达式过滤====查找当前元素之前所有的同辈元素#}

         cart_id=$(this).parents('.col06').siblings('.col01').find('input').val();

         input_count = $(this);
        $.get('/cart/get/',{'cart_id':cart_id,'count':num},function (data) {
            input_count.val(data.count);
            calculate();
        });
        //calculate()  此处的代码比位置１处的代码先执行!  放这里会产生bug
     });

})

</script>
{%endblock head%}

{%block content%}

	<div class="total_count">全部商品<em>2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    <form method="get" action="/myorder/">
    {% if carts %}
        {% for cart in carts %}
	<ul class="cart_list_td clearfix" id="{{ cart.id }}">
		<li class="col01"><input type="checkbox" name="cart_id" value='{{cart.id}}' checked></li>
        {#        form提交需要键值对:input===name,value必须要有值#}
		<li class="col02"><a href="/detail{{ cart.goods.id }}"><img src="/static/{{ cart.goods.gpic }}"></a></li>
		<li class="col03"> {{ cart.goods.gtitle }}
            <br><span style="color:red;font-weight: bold;">
                库存：<em>{{cart.goods.gkucun}}</em></span>
        </li>
		<li class="col04">{{cart.goods.gunit}}</li>
		<li class="col05">{{cart.goods.gprice}}</li>
		<li class="col06">
            <div id="cart_id" style="display: none" >{{ cart.id }}</div>
			<div class="num_add">
				<a href="javascript:;" class="minus fl">-</a>
				<input type="text" class="num_show fl" value="{{ cart.count }}">
				<a href="javascript:;" class="add fl">+</a>
            </div>
            <div class="num_gt" style="color: red;height: 30px;line-height: 30px;"></div>
		</li>
		<li class="col07">25.80元</li>
		<li class="col08"><a href="javascript:del({{ cart.id }});">删除</a></li>
	</ul>
        {% endfor %}
   {% else %}
        <div class="total_count">没有商品</div>
   {% endif %}

	<ul class="settlements">
		<li class="col01"><input type="checkbox" id="check_all" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>42.60</em><br>共计<b>2</b>件商品</li>
		<li class="col04"><input type="submit" value="去结算"></li>
	</ul>
</form>

{%endblock content%}
